import { Component } from '@angular/core';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzMenuModule } from 'ng-zorro-antd/menu';

@Component({
  selector: 'app-dropdown-place',
  standalone: true,
  imports: [NzButtonModule, NzDropDownModule, NzMenuModule, NzIconModule],
  template: `
    <div class="demo" style="padding-top: 200px;">
      <a
        nz-button
        nzType="link"
        nz-dropdown
        [nzDropdownMenu]="dropdownMenu"
        nzPlacement="topLeft"
      >
        Hover me
        <span nz-icon nzType="down"></span>
      </a>
      <nz-dropdown-menu #dropdownMenu="nzDropdownMenu">
        <div nz-menu>
          <div nz-menu-item>1st menu item</div>
          <div nz-menu-item>2nd menu item</div>
          <div nz-menu-item>3rd menu item</div>
          <div nz-menu-item nzDanger>4th menu item</div>
        </div>
      </nz-dropdown-menu>
    </div>
  `,
  styles: ``,
})
export class DropdownPlaceComponent {}
